<template>
	<view>
		<view class="container">
			<view class="title">
				地图找铺体验反馈
			</view>
			<view class="remarks">
				<view>感谢您百忙之中点开问卷!</view>
				<view>您觉得商和铺APP体验怎么样？</view>
				<view>您的反馈我们会认真对待，也会成为未来改进的方向。</view>
			</view>
			<view class="questions">
				<view class="quest-tit"><text>*</text>您使用地图找铺的感受是？</view>
				<view class="radio-list">
					<radio-group @change="radioChange">
						<label class="acea-row row-middle radio-item" v-for="(item, index) in items" :key="item.value">
							<view>
								<radio :value="item.value" color="#EE212D" :checked="index === current" />
							</view>
							<view>{{item.name}}</view>
						</label>
					</radio-group>
				</view>
			</view>
			
			<view class="others">
				<view class="others-tit">
					如您对地图找铺功能有意见和建议，欢迎在下方反馈（如没有可不填）
				</view>
				<view class="textacea-box">
					<textarea name="" id="" :maxlength="textMaxLength" v-model="remark"></textarea>
					<view class="textacea-num">{{remark.length}}/{{textMaxLength}}</view>
				</view>
			</view>
			
			<view class="btn">提交</view>
		</view>
		<view class="uni-p-b-98"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				remark:'',
				textMaxLength:100,
				items: [{
						value: '1',
						name: '没怎么用，不好说',
						checked: 'true'
					},
					{
						value: '2',
						name: '非常不满意'
					},
					{
						value: '3',
						name: '不太满意'
					},
					{
						value: '4',
						name: '一般'
					},
					{
						value: '5',
						name: '比较满意'
					}
				],
				current: 0
			};
		},
		methods: {
			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 26rpx;
	}

	.title {
		font-size: 40rpx;
		font-weight: 400;
		color: rgba(238, 33, 45, 1);
		text-align: center;
		padding: 0 0 40rpx;
	}

	.remarks {
		font-size: 28rpx;
		font-weight: 400;
		line-height: 48rpx;
		color: rgba(56, 56, 56, 1);
		text-align: left;
		border-bottom: 1px dashed rgba(229, 229, 229, 1);
		padding-bottom: 40rpx;
	}

	.questions {
		border-bottom: 1px dashed rgba(229, 229, 229, 1);
		padding: 40rpx 0;
		font-size: 30rpx;

		.quest-tit {
			text {
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(238, 33, 45, 1);
			}
		}
		.radio-list{
			.radio-item{
				margin-top: 30rpx;
			}
		}
	}
	.others{
		padding: 40rpx 0;
		.others-tit{
			font-size: 32rpx;
			font-weight: 400;
			color: rgba(56, 56, 56, 1);
		}
		.textacea-box{
			width: 100%;
			height: 308rpx;
			margin-top: 30rpx;
			opacity: 1;
			border-radius: 12rpx;
			background: rgba(247, 247, 247, 1);
			overflow: hidden;
			textarea{
				display: block;
				width: 100%;
				height: 258rpx;
				background: rgba(247, 247, 247, 1);
				padding: 24rpx;
			}
			.textacea-num{
				text-align: right;
				padding-right: 24rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(229, 229, 229, 1);
			}
		}
	}
	.btn{
		width: 100%;
		height: 96rpx;
		line-height: 96rpx;
		text-align: center;
		border-radius: 50rpx;
		background: rgba(238, 33, 45, 1);
		font-size: 36rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
	}
</style>
<style>
	page {
		background: #ffffff!important;
	}
</style>
